import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators, Dispatch, AnyAction } from 'redux';
import Actions from '@/src/store/main/actions';
import Router from '../router'
import { Layout, Menu } from 'antd';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
} from '@ant-design/icons';
import 'antd/dist/antd.css';
import './index.css'
import Menus from '@/component/menu'
const { Header, Sider, Content } = Layout;
export class App extends Component<any> {

    imgClick() {
        const { actions } = this.props;
        actions.testFn("update test value");
    }
    state = {
        collapsed: false,
    };

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };
    render() {
        let { test } = this.props
        const localRoutes: Array<any> = [
            {
                path: '/',
                key: 'home',
                auth: true,
                name: '主页'
            },
            {
                path: '/about',
                key: 'about',
                auth: true,
                name: '关于',
            },
            {
                path: '/more',
                key: 'more',
                auth: true,
                name: '更多',
                children: [
                    {
                        path: '/sub1',
                        key: 'sub1',
                        auth: true,
                        name: '主页'
                    },
                    {
                        path: '/sub2',
                        key: 'sub2',
                        auth: true,
                        name: '关于',
                        children: [
                            {
                                path: '/sub1',
                                key: 'sub1-1',
                                auth: true,
                                name: '主页'
                            },
                            {
                                path: '/sub2',
                                key: 'sub2-2',
                                auth: true,
                                name: '关于',
                            },
                        ]
                    },
                ]
            }
        ];
        return (
            <Layout>
                <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
                    <div className="logo" />
                        <Menus items={localRoutes} ></Menus>
                </Sider>
                <Layout className="site-layout">
                    <Header className="site-layout-background" style={{ padding: 0 }}>
                        {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                            className: 'trigger',
                            onClick: this.toggle,
                        })}
                    </Header>
                    <Content
                        className="site-layout-background"
                        style={{
                            margin: '24px 16px',
                            padding: 24,
                            minHeight: 280,
                        }}
                    >

                        <Router mode=""></Router>
                    </Content>
                </Layout>
            </Layout>
        )
    }
}

const mapStateToProps = (state: any) => ({
    ...state.main
})

const mapDispatchToProps = (dispatch: Dispatch<AnyAction>) => ({
    actions: bindActionCreators({
        ...Actions,
    }, dispatch)
})

export default connect(mapStateToProps, mapDispatchToProps)(App)
